<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{position:relative;margin: 100px;background: pink;width: 400px;height: 400px;}
    #box{width: 100px;height:100px;background: red;padding: 30px;border: solid 40px black;margin: 50px;overflow: auto;}
  </style>
</head>
<body>
  <h2>123123</h2>
  <div class="cont">
    <div id="box">这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字这是内容文字</div>
  </div>
</body>
<script>

  var box = document.querySelector("#box")

  console.log( box );

  // 只能获取，不能设置

  // cont + padding
  console.log( box.clientWidth, box.clientHeight );

  // cont + padding + border
  console.log( box.offsetWidth, box.offsetHeight );

  // cont + padding + 溢出的尺寸
  console.log( box.scrollWidth, box.scrollHeight );

  // 相对于包含块偏移的距离
  console.log( box.offsetLeft, box.offsetTop );

  // 获取包含块
  console.log( box.offsetParent );

  document.onclick = function(){
    // 滚走的距离
    // 既能获取
    console.log( box.scrollLeft, box.scrollTop );
    // 有能设置
    // box.scrollTop = 222
  }


</script>
</html>